<template>
    <Card>
        <!-- <JG-search :searchData="searchData" @on-input-search="askDatasearch" @on-change-search="askDatasearchs" ></JG-search> -->
        <Button  type="primary" @click="clickmodal(true)" class="ivu-mb-16" v-hasC="{name: '-v1-article-banned-create-banned',flag: '/v1/article/banned/create-banned'}">新增</Button>
        <JG-table
            :params="domainparams"
            :data="data"
            :columns="columns"
            :loading="loading"
            :total="total"
            :butshow="butshow"
            :disabledhover="true"
            @handleCopyid="handleCopyid"
            @handleCopysecret="handleCopysecret"
            @handleDelete="handleDelete"
            @askData="askData"
            @handleEdit="handleEdit"
            :maxHeight="600"
        ></JG-table>
        <Modal  v-model="modalstatus" :title="modalTitle" @on-cancel="modalCancel(modalfine)" width="600">
            <Form :label-width='200' :ref='modalfine' :model='modalparams' :rules='createRules'>
                <FormItem  label='公众号名称：' prop="name" >
                    <Input  style="width: 280px" clearable v-model='modalparams.name' placeholder='请输入公众号名称' />
                </FormItem>
                <FormItem  label='开发者ID(AppID)：' prop="appid" >
                    <Input  style="width: 280px" clearable v-model='modalparams.appid' placeholder='请输入开发者ID' />
                    <p>AppID请登录公众号后台，在基本设置中查阅</p>
                </FormItem>
                <FormItem  label='开发者密码(AppSecret)：' prop="secret" >
                    <Input  style="width: 280px" clearable v-model='modalparams.secret' placeholder='请输入开发者密码' />
                    <p>AppSecret请登录公众号后台，在基本设置中查阅</p>
                </FormItem>
                <FormItem  label='类型：' prop="type">
                    <Select  style="width:200px" v-model="modalparams.type" filterable>
                        <Option v-for="item in sitList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="归属的项目：" prop="project_id">
                    <Select  style="width:200px"  placeholder="请选择项目切换" v-model="modalparams.project_id" >
                        <Option v-for="item in project" :value="item.value" :key="item.value">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem  label='认证到期时间：' prop="overdue_time" >
                    <!-- <span>{{overdue_time}}</span> -->
                    <DatePicker type="date" v-model="modalparams.overdue_time" placeholder="认证到期时间" style="width: 200px" />
                    <div style="color:#f00">只有认证过的公众号才可以配置</div>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="modalCancel(modalfine)">取消</Button>
                <Button type="primary" :loading="saveLoading" @click="modalSave(modalfine)">保存</Button>
            </div>
        </Modal>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p>确定要删除当前公众号？</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import { wechatConfiglist, wechataddConfig,wechatupdateConfig, wechatDelconfig } from '@api/public'
    import util from '@/libs/util';
    export default {
        data () {
            return {
                modalfine: 'modalfine',
                loading: false,
                total: 0,
                data: [],
                domainparams: { page: 1, pageSize: 10 },
                projectId: util.storage.get('currentProject'),
                modaldel: false,
                modal_loading: false,
                butshow: {
                    Edit: {
                        name: '-v1-article-banned-update-banned',
                        flag: '/v1/article/banned/update-banned'
                    },
                    See: {
                        name: '-v1-article-banned-delete-banned',
                        flag: '/v1/article/banned/delete-banned'
                    },
                    Delete: {
                        name: '-v1-article-banned-delete-banned',
                        flag: '/v1/article/banned/delete-banned'
                    }
                },
                sitList: [
                    {
                        id: 1,
                        name: '订阅号'
                    },
                    {
                        id: 2,
                        name: '服务号'
                    }
                ],
                // searchData: {
                //     left: [
                //         { id: 1, key: 'Input', value: '', style: { width: '200px' }, clearable: true, placeholder: '请输入要搜索的违禁词', callback: 'search' }
                //     ]
                // },
                columns: [
                    {
                        title: 'ID',
                        key: 'id',
                        // align: 'center',
                        width: 70,
                        fixed: 'left'
                    },
                    {
                        title: '公众号名称',
                        key: 'name'
                    },
                    {
                        title: '类型',
                        width: 200,
                        render: (h, params) => h('span', params.row.type == 1 ? '订阅号' : '服务号')
                    },
                    {
                        title: '认证到期时间',
                        key: 'overdue_time'
                    },
                    {
                        title: 'AppID',
                        slot: 'appid'
                    },
                    {
                        title: 'AppSecret',
                        slot: 'appsecret'
                    },
                    {
                        title: '添加人 ',
                        key: 'realname'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'option',
                        slot: 'option',
                        fixed: 'right',
                        width: 110
                    }
                ],
                modalparams: { name: '', appid: '', secret: '', type: '', certification_type: '', overdue_time: '',  project_id: util.storage.get('currentProject'), },
                createRules: {
                    name: [{ required: true, message: '请输入公众号', trigger: 'blur' }],
                    appid: [{ required: true, message: '请输入开发者ID', trigger: 'blur' }],
                    secret: [{ required: true, message: '请输入开发者密码', trigger: 'blur' }],
                    type:[{ required: true, message: '请选择类型', trigger: 'change',type:'number'}],
                    project_id:[{ required: true, message: '请选择项目ID', trigger: 'change'}],
                    overdue_time:[{ required: true, message: '请选择认证时间', trigger: 'change', type:'date'}]
                },
                saveLoading: false,
                modalstatus: false,
                modalTitle: '',
                project: util.storage.get('project'),

            }
        },
        beforeDestroy () {
            let webcurrProject = util.storage.get('webcurrProject')
            // console.log(webcurrProject, 'webcurrProject')
            util.storage.set('currentProject', webcurrProject)
            // util.storage.get('currentProject')
        },
        created () {
            this.getList()
        },
        methods: {
            getList () {
                // this.searchData.left.forEach((item) => {
                //     if (item.id === 1) {
                //         this.domainparams.keyword = item.value
                //     }
                // })
                this.loading = true
                wechatConfiglist(this.domainparams).then(res => {
                    this.data = res.list
                    this.total = res.total
                    this.loading = false
                })
            },
            // askDatasearchs () {
            //     this.askDatasearch()
            // },
            // askDatasearch () {
            //     this.getList()
            // },
            askData () {
                this.getList()
            },
            // 复制
            handleCopyid (row) {
                this.$Copy({
                    text: row.appid,
                    success: () => {
                        this.$Notice.success({
                            title: '复制成功'
                        })
                    },
                    error: () => {
                        this.$Notice.error({
                            title: '复制失败'
                        })
                    }
                })
            },
            handleCopysecret (row) {
                this.$Copy({
                    text: row.secret,
                    success: () => {
                        this.$Notice.success({
                            title: '复制成功'
                        })
                    },
                    error: () => {
                        this.$Notice.error({
                            title: '复制失败'
                        })
                    }
                })
            },
            // 新增
            clickmodal () {
                this.modalTitle = '新增公众号'
                this.modalstatus = true
            },

            handleEdit (row) {
                this.modalTitle = '编辑公众号'
                this.modalparams={
                    name:row.name,
                    appid:row.appid,
                    secret:row.secret,
                    type:row.certification_type*1,
                    overdue_time:row.overdue_time,
                    project_id:row.project_id
                }

                this.$set(this.modalparams, 'id', row.id)
                this.modalstatus = true
            },
            modalCancel (name) {
                this.$refs[name].resetFields();
                // this.modalparams.banned_word = '';
                this.modalstatus = false;
                this.saveLoading = false
            },
            modalSave (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        const params={
                            name:this.modalparams.name,
                            appid:this.modalparams.appid,
                            secret:this.modalparams.secret,
                            type:this.modalparams.type,
                            overdue_time:this.$Date(this.modalparams.overdue_time).format('YYYY-MM-DD'),
                            project_id:this.modalparams.project_id
                        }
                        this.saveLoading = true
                        if (this.modalTitle === '新增公众号') {
                            wechataddConfig(params).then(res => {
                                this.$Message.success('新增成功');
                                this.modalCancel(name)
                                this.getList()
                            }).catch(() => {
                                this.modalCancel(name)
                            });
                        } else {
                            wechatupdateConfig(Object.assign({},params,{ id: this.modalparams.id,})).then(res => {
                                this.$Message.success('编辑成功');
                                this.modalCancel(name)
                                this.getList()
                            }).catch(() => {
                                this.modalCancel(name)
                             });
                        }
                    }
                })
            },
            handleDelete (row) {
                this.modaldel = true
                this.$set(this.modalparams, 'id', row.id)
            },
            cancel () {
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                wechatDelconfig({ id: this.modalparams.id }).then(res => {
                    this.$Message.success('删除成功');
                    this.cancel()
                    this.getList()
                })
            }
        }
    }
</script>
